<template>
    <div class="query">
        <!-- 高级查询 -->
        <el-dialog title="高级查询" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
            <div>
                <table>
                    <tr>
                        <td>条款序号：</td>
                        <td>
                            <el-select v-model="checkParamRequest.clauseCode" placeholder="请选择" size="mini" clearable filterable>
                                <el-option 
                                    :label="item.dictKeyName"
                                    :value="item.dictKey" 
                                    v-for="(item) in clauseCodeCkSelect" 
                                    :key="item.dictKey"
                                >{{item.dictKeyName}}</el-option>
                            </el-select>
                        </td>
                        <td>条款状态：</td>
                        <td>
                            <el-select v-model="checkParamRequest.clauseStatus" placeholder="请选择" size="mini" clearable>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="禁用" value="0"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>条款原文：</td>
                        <td>
                            <el-select v-model="checkParamRequest.clauseText" placeholder="请选择" size="mini" clearable filterable>
                                <!-- <el-option 
                                    :label="item.dictKeyName"
                                    :value="item.dictKey" 
                                    v-for="(item) in clauseTextCkSelect" 
                                    :key="item.dictKey"
                                >
                                    <el-tooltip placement="top" :disabled="item.dictKeyName.length<17">
                                        <div slot="content">
                                            <span>{{item.dictKey}}  {{item.dictKeyName}}</span>
                                        </div>
                                    </el-tooltip>
                                </el-option> -->
                                <el-option 
                                    :label="item.dictKeyName"
                                    :value="item.dictKey" 
                                    v-for="(item) in clauseTextCkSelect" 
                                    :key="item.dictKey"
                                >{{item.dictKeyName}}
                                </el-option>
                            </el-select>
                        </td>
                        <td>来源名称: </td>
                        <td>
                            <el-input v-model="checkParamRequest.indexSourceName" placeholder="请输入内容" size="mini"> </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>风控系统是否支持：</td>
                        <td>
                            <el-select v-model="checkParamRequest.realTimeSupport" placeholder="请选择" size="mini" clearable>
                                <el-option label="支持" value="1"></el-option>
                                <el-option label="部分支持" value="2"></el-option>
                                <el-option label="不支持" value="3"></el-option>
                            </el-select>
                        </td>
                        <td>恒生系统能否支持：</td>
                        <td>
                            <el-select v-model="checkParamRequest.hdSupport" placeholder="请选择" size="mini" clearable>
                                <el-option label="支持" value="1"></el-option>
                                <el-option label="部分支持" value="2"></el-option>
                                <el-option label="不支持" value="3"></el-option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClauseQuery('cancel')">取 消</el-button>
                <el-button @click="handleClauseQuery('reset')">重 置</el-button>
                <el-button type="primary" @click="handleClauseQuery('confirm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({
    name: 'ReviewQueryDialog',
    components: {},
})
export default class ReviewQueryDialog extends Vue {
    @Prop() clauseQueryDialog;
    @Prop() checkParamRequestPra;
    private dialogVisible: boolean = false;
    private clauseCodeSelect = []; // 条款编号下拉数据
    private clauseNoSelect = []; // 条款号下拉数据
    private clauseTextSelect = []; // 条款原文下拉数据
    private clauseCodeCkSelect = []; // 条款序号下拉数据
    checkParamRequest = { // table页查询参数
        clauseTextLike: '', // 模糊查询
        clauseCode: '', // 条款序号
        clauseStatus: '', // 条款状态
        clauseText: '', // 条款原文
        indexSourceName: '', // 来源名称
        // versionNumber: '', // 版本号
        // sourceType: '', // 来源类型
        realTimeSupport: '', // 风控系统是否支持
        hdSupport: '', // 恒生系统能否支持
    }
    clauseTextCkSelect = []; // 条款原文下拉
    @Watch('clauseQueryDialog')
    watchClauseQueryDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
            this.getClauseTextCkSelect();
            this.getClauseCodeCkSelect();
            Object.keys(this.checkParamRequest).forEach((key) => {
                console.log(key, this.checkParamRequestPra[key])
              this.checkParamRequest[key] = this.checkParamRequestPra[key]
            })
        } else {
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitClauseQuery', val, '');
        }
    }
    handleClauseQuery(param1) {
        if (param1 == 'cancel') {
            this.dialogVisible = false;
        } else if (param1 == 'confirm') {
            this.$emit('emitClauseQuery', false, this.checkParamRequest)
        } else if (param1 == 'reset') {
            this.checkParamRequest = { // table页查询参数
                clauseTextLike: '', // 模糊查询
                clauseCode: '', // 条款序号
                clauseStatus: '', // 条款状态
                clauseText: '', // 条款原文
                indexSourceName: '', // 来源名称
                // versionNumber: '', // 版本号
                // sourceType: '', // 来源类型
                realTimeSupport: '', // 风控系统是否支持
                hdSupport: '', // 恒生系统能否支持
                // paging: {
                //     currentPage: 1,
                //     pageSize: 50
                // },
            }
        }
    }
    // 条款原文下拉
    getClauseTextCkSelect() {
        this.$axios.post('/indexClause/clauseTextCkSelect', {
            clauseCode: ''
        }).then((res: any) => {
            this.clauseTextCkSelect = [];
            res.forEach(item => this.clauseTextCkSelect.push(item || ''))
        });
    }
    // 条款编号下拉
    getClauseCodeCkSelect() {
        this.$axios.post('/indexClause/clauseCodeCkSelect', {
            clauseCode: ''
        }).then((res: any) => {
            this.clauseCodeCkSelect = [];
            res.forEach(item => this.clauseCodeCkSelect.push(item || ''))
        });
    }
}
</script>
<style lang="scss" scoped>
.query {
    background: #ffffff;
}
table {
    border-spacing: 10px;
    tr {
        td:nth-child(1),
        td:nth-child(3) {
            text-align: right;
            width: 130px !important;
        }
    }
}

// .el-select-dropdown__item{
//     // display: inline-block;
// }
// /deep/ .el-select-dropdown__item span {
//     max-width: 305px !important;
//     // display: inline-block;
// }
</style>
<style>
.el-select-dropdown{
    max-width: 343px !important;
}
</style>
